<template>
  <el-dialog
    class="public-dialog"
    title="打印预览"
    width="860"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div class="h-[660px]" v-loading="loading">
      <div v-html="bill_html"></div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";

const props = defineProps({
  id: { type: [String, Number], default: "" },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  options: { type: Object, default: () => ({}) },
});

const emit = defineEmits(["update:modelValue", "refresh", "close"]);

const loading = ref(false);
const bill_html = ref("");

watch(
  () => props.id,
  (val) => {
    bill_html.value = val;
  }
);

const handleClose = async (refresh) => {
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style scoped>
</style>
